<template>
  <div class="settle-manage">
    <div style="float: right;">
      <el-input 
        v-model="dataFilter.text" 
        :suffix-icon="Search" 
        placeholder="房间号/用户名"
        @change="handleSearch"
      />
    </div>

    <div style="margin-bottom: 20px;">
      <el-button type="primary" @click="handleAdd">添加</el-button>
      <el-button type="danger" @click="handleDelete">删除</el-button>
    </div>
    <el-table
      :data="sourceData.list"
      border
      highlight-current-row
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column label="房间号" prop="houseNum" />
      <el-table-column label="用户名" prop="userName" />
      <el-table-column label="收费模板" prop="templateName" width="100"/>
      <el-table-column label="结算方式" prop="settleType" width="100">
        <template #default="{ row }">
          {{ getSettleTypeLabel(row.settleType) }}
        </template>
      </el-table-column>
      <el-table-column label="账单日" prop="billDay" width="100"/>
      <el-table-column label="备注" prop="remark" />
      <el-table-column label="操作" align="center" width="160">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleView(row)">
            查看
          </el-button>
          <el-button type="primary" link @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button type="danger" link @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :pageProps="pageProps" layout="prev, pager, next" @current-change="getList" />
  </div>

  <ChargeInfoDialog ref="dialog" @listChange="itemData" />
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { SETTLE_TYPE } from "@/utils/config";
import { Search } from '@element-plus/icons-vue'
import { getChargeList, dellCharge, getChargeDetail } from '@/api/settle'
import Pagination from '@/components/Pagination/Index.vue'
import ChargeInfoDialog from './ChargeInfoDialog.vue'

const dataFilter = reactive({
  title: undefined,
})

const pageProps = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

const sourceData = reactive({
  list: [] as any,
})

const projectId = ref(null)

const getList = () => {
  getChargeList({
    projectId: projectId.value,
    pageNum: pageProps.value.pageNum,
    pageSize: pageProps.value.pageSize,
    ...dataFilter
  }).then((res)=>{
    console.log('resSet', res)
    sourceData.list = res.data.records
    // TODO use real api total res total
    pageProps.value.total = res.data.total
  })
  .catch((err) => {
    console.error('err', err)
  })
}

getList()

const handleSearch = () => {
  getList()
}

const getSettleTypeLabel = (value: string) => {
  return SETTLE_TYPE.find((item) => item.value == value)?.label || value;
};

const onReset = () => {
  // TODO use method component
  dataFilter.text = undefined
  Object.assign(pageProps.value, {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  })
}

const dialog: any = ref(null)

const handleAdd = () => {
  dialog.value.dialogVisible = true
  dialog.value.dialogStatus = 'create'
  dialog.value.isDisabled = true
}

const handleView = (row: any) => {
  console.log('row', row)
  dialog.value.dialogVisible = true
  dialog.value.dialogStatus = 'view'
  dialog.value.isDisabled = false
  nextTick(()=>{
    getChargeDetail(row.id)
    .then((res)=>{
      Object.assign(dialog.value.tableItem, res.data)
    })
    .catch((err)=>{
      console.error('err', err)
    })
  })
}

const handleEdit = (row: any) => {
  dialog.value.dialogVisible = true
  dialog.value.dialogStatus = 'edit'
  dialog.value.isDisabled = true
  nextTick(()=>{
    getChargeDetail(row.id)
    .then((res)=>{
      console.log('res', res)
      Object.assign(dialog.value.tableItem, res.data)
    })
    .catch((err)=>{
      console.error('err', err)
    })
  })
}

const itemData = () => {
  getList()
}

const multipleSelection = ref<any>([])

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val.map(item=>item.id);
}

const handleDelete = (row: any) => {
  if(multipleSelection.value.length>0||row.id){
  ElMessageBox.confirm(
    '确定要删除吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {  
    const params = {
      idList: multipleSelection.value
    }
    if (row.id) params.idList = [row.id]
    dellCharge(params) 
    .then((res: any) => {
      ElMessage.success('删除成功！')
      getList()
    })
    .catch((err: any) => {
      console.error('err', err.msg)
      ElMessage.success('删除失败！')
      getList()
    })
  })
  .catch(() => {})
}else{
    ElMessage({
    message: '请选择要删除的数据',
    type: 'warning',
  })
  }
}

defineExpose({ getList, projectId })
</script>

<style lang="scss" scoped></style>
